<template>
	<div id="home">
		<SearchIpt />
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
			<van-swipe-item v-for="item in banner" :key="item.id">
				<a href="javascript:;"><img :src="item.src"></a>
			</van-swipe-item>
		</van-swipe>

		<van-grid>
			<van-grid-item icon="/img/list_1.png" text="新品推荐" to="/goodsdil/60dffdf7461fda924864a36a" />
			<van-grid-item icon="/img/list_2.png" text="会员福利" to="/goodsdil/60dffdf7461fda924864a36a" />
			<van-grid-item icon="/img/list_3.png" text="中央维修" to="/goodsdil/60dffdf7461fda924864a36a" />
			<van-grid-item icon="/img/list_4.png" text="以旧换新" to="/goodsdil/60dffdf7461fda924864a36a" />
		</van-grid>
		<van-notice-bar left-icon="img/download.jpg" color="#000" background="#fff" :scrollable="false" mode="link">
			<van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
				<van-swipe-item>biubiubiu</van-swipe-item>
				<van-swipe-item>ruaruarua</van-swipe-item>
				<van-swipe-item>dadadada</van-swipe-item>
			</van-swipe>
		</van-notice-bar>
		<div class="activities">
			<h2>精选活动</h2><span>SELECTION OF ACTIVITIES</span>
			<van-row justify="space-around" class="rows">
				<van-col span="12" tag="li">
					<van-image width="2.9rem" fit="contain"
						src="https://www.xgdq.com/public/images/62/96/ee/30f3379dc0caecb0a352d60b8cccf8dc224d6599.png?1608014919#w" />
				</van-col>
				<van-col span="12" tag="li">
					<van-image width="2.9rem" fit="contain"
						src="https://www.xgdq.com/public/images/4b/42/9c/518bfc928b04e147fbb2ddba9f9852224fc2cc5f.png?1619508803#w" />
				</van-col>
				<van-col span="8" tag="li">
					<van-image width="1.9rem" fit="contain"
						src="https://www.xgdq.com/public/images/c8/58/e9/2641d443215c37ac7db7d57226031be55a5a7855.jpg?1624264498#h" />
				</van-col>
				<van-col span="8" tag="li">
					<van-image width="1.9rem" fit="contain"
						src="https://www.xgdq.com/public/images/a4/e8/ae/f77dbcd8bd6c03f2eb3ccec10a27072eae92fa12.png?1610439038#h" />
				</van-col>
				<van-col span="8" tag="li">
					<van-image width="1.9rem" fit="contain"
						src="https://www.xgdq.com/public/images/b7/fb/19/ed59cc330479a2c7df95f4c0489bb33b1828487a.jpg?1604321795#h" />
				</van-col>
			</van-row>
		</div>
		<div class="goods">
			<ul>
				<li v-for="item in this.$route.query.data" :key="item._id" >
					<div @click="jumpToDetail(item._id)">
						<h1>{{item.classify}}热卖</h1>
						<div class="goods_wrap">
							<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
								<van-swipe-item v-for="(item2,index) in item.tit_img" :key="index">
									<img :src="item2">
								</van-swipe-item>
							</van-swipe>
							<h2><span>爆款</span>{{item.name}}</h2>
							<h3>{{item.seb_name}}</h3>
							<p>￥{{item.price}}</p>
						</div>
					</div>
					<button type="button" @click="$router.push('/list')">查看更多同类产品</button>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import SearchIpt from "../components/searchipt.vue"
	export default {
		name: 'home',
		data() {
			return {
				banner: [],
			}
		},
		methods: {
			jumpToDetail(id) {
				this.$router.push(`/goodsdil/${id}`).catch(() =>{})
			},
			jumpToSearch() {
				this.$router.push("/search").catch(() =>{})
			},
		},
		computed: {},
		components: {
			SearchIpt
		},
		mounted() {
			this.$axios({
				url: '/banner',
			}).then(
				res => {
					if (res.err === 2) {
						this.$router.push('/login').catch(() =>{})
					} else if (res.data.err === 1) {
						alert("网址有误")
					} else {
						this.banner = res.data
					}
				})

		},
		updated() {
			if (this.$route.path.includes('search')) {
				this.flag = false
			} else {
				this.flag = true
			}
		}
	}
</script>

<style scoped>
	.my-swipe .van-swipe-item {
		color: #fff;
		text-align: center;
		float: left;
	}

	.my-swipe .van-swipe-item img {
		width: 100%;
	}

	.notice-swipe {
		height: 40px;
		line-height: 40px;
	}

	.activities h2 {
		display: inline-block;
		margin: 0.2rem;
	}

	.activities span {
		color: #cacaca;
	}

	.activities .rows {
		width: 6rem;
		background-color: #ffffff;
		padding: 0.1rem;
		margin: 0 auto;
		border-radius: 0.1rem;
	}

	.activities .rows li {
		text-align: center;
	}

	.goods {
		padding-bottom: 1rem;
	}

	.goods .goods_wrap {
		background-color: #ffffff;
		margin: 0.2rem;
		border-radius: 0.15rem;
	}

	.goods h1 {
		margin: 0.3rem;
		font-size: 0.35rem;
	}

	.goods h2 {
		margin: 0.1rem;
		font-size: 0.3rem;
	}

	.goods h2 span {
		font-size: 0.21rem;
		float: left;
		margin: 0.08rem;
		width: 0.5rem;
		height: 0.3rem;
		text-align: center;
		background-color: #fe554b;
		border-radius: 0.1rem;
		color: #fff;
	}

	.goods h3 {
		margin-left: 0.25rem;
		color: #797979;
	}

	.goods p {
		margin: 0.2rem;
		line-height: 0.5rem;
		font-size: 0.4rem;
		color: #ec232b;
	}

	.goods button {
		display: block;
		background-color: #fff;
		border-radius: 0.1rem;
		border: none;
		font-size: 0.26rem;
		margin: 0.2rem auto;
		width: 5.8rem;
		height: 0.8rem;
	}


	.goods .my-swipe .van-swipe-item img {
		width: 100%;
	}
</style>
